// stylelint-disable declaration-no-important

//
// Utilities for common `display` values
//

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    @each $value in $displays {
      .d#{$infix}-#{$value} { display: $value !important; }
    }
  }
}

//
// Utilities for toggling `display` in print
//

@media print {
  @each $value in $displays {
    .d-print-#{$value} { display: $value !important; }
  }
}



// stylelint-disable declaration-no-important

// Flex variation
//
// Custom styles for additional flex alignment options.

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
    $responsive: $enable-responsive-flex or $infix == "";

    @if $responsive {

      .flex#{$infix}-row            { flex-direction: row !important; }
      .flex#{$infix}-column         { flex-direction: column !important; }
      .flex#{$infix}-row-reverse    { flex-direction: row-reverse !important; }
      .flex#{$infix}-column-reverse { flex-direction: column-reverse !important; }

      .flex#{$infix}-wrap         { flex-wrap: wrap !important; }
      .flex#{$infix}-nowrap       { flex-wrap: nowrap !important; }
      .flex#{$infix}-wrap-reverse { flex-wrap: wrap-reverse !important; }
      .flex#{$infix}-fill         { flex: 1 1 auto !important; }
      .flex#{$infix}-grow-0       { flex-grow: 0 !important; }
      .flex#{$infix}-grow-1       { flex-grow: 1 !important; }
      .flex#{$infix}-shrink-0     { flex-shrink: 0 !important; }
      .flex#{$infix}-shrink-1     { flex-shrink: 1 !important; }

      .justify-content#{$infix}-start   { justify-content: flex-start !important; }
      .justify-content#{$infix}-end     { justify-content: flex-end !important; }
      .justify-content#{$infix}-center  { justify-content: center !important; }
      .justify-content#{$infix}-between { justify-content: space-between !important; }
      .justify-content#{$infix}-around  { justify-content: space-around !important; }

      .align-items#{$infix}-start    { align-items: flex-start !important; }
      .align-items#{$infix}-end      { align-items: flex-end !important; }
      .align-items#{$infix}-center   { align-items: center !important; }
      .align-items#{$infix}-baseline { align-items: baseline !important; }
      .align-items#{$infix}-stretch  { align-items: stretch !important; }

      .align-content#{$infix}-start   { align-content: flex-start !important; }
      .align-content#{$infix}-end     { align-content: flex-end !important; }
      .align-content#{$infix}-center  { align-content: center !important; }
      .align-content#{$infix}-between { align-content: space-between !important; }
      .align-content#{$infix}-around  { align-content: space-around !important; }
      .align-content#{$infix}-stretch { align-content: stretch !important; }

      .align-self#{$infix}-auto     { align-self: auto !important; }
      .align-self#{$infix}-start    { align-self: flex-start !important; }
      .align-self#{$infix}-end      { align-self: flex-end !important; }
      .align-self#{$infix}-center   { align-self: center !important; }
      .align-self#{$infix}-baseline { align-self: baseline !important; }
      .align-self#{$infix}-stretch  { align-self: stretch !important; }

    }
  }
}

// stylelint-disable declaration-no-important

// Common values
@each $position in $positions {
  .position-#{$position} { position: $position !important; }
}

// Shorthand

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: $z-index-fixed;
}

.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $z-index-fixed;
}

.sticky-top {
  @supports (position: sticky) {
    position: sticky;
    top: 0;
    z-index: $z-index-sticky;
  }
}

// stylelint-disable declaration-no-important

// Width and height

@each $prop, $abbrev in (width: w, height: h) {
  @each $size, $length in $sizes {
    .#{$abbrev}-#{$size} { #{$prop}: $length !important; }
  }
}

.mw-100 { max-width: 100% !important; }
.mh-100 { max-height: 100% !important; }

// Viewport additional helpers

.min-vw-100 { min-width: 100vw !important; }
.min-vh-100 { min-height: 100vh !important; }

.vw-100 { width: 100vw !important; }
.vh-100 { height: 100vh !important; }

// stylelint-disable declaration-no-important

// Margin and Padding

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
    $responsive: $enable-responsive-spacing or $infix == "";

    @if $responsive {

      @each $prop, $abbrev in (margin: m, padding: p) {
        @each $size, $length in $spacers {
          .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
          .#{$abbrev}t#{$infix}-#{$size},
          .#{$abbrev}y#{$infix}-#{$size} {
            #{$prop}-top: $length !important;
          }
          .#{$abbrev}r#{$infix}-#{$size},
          .#{$abbrev}x#{$infix}-#{$size} {
            #{$prop}-right: $length !important;
          }
          .#{$abbrev}b#{$infix}-#{$size},
          .#{$abbrev}y#{$infix}-#{$size} {
            #{$prop}-bottom: $length !important;
          }
          .#{$abbrev}l#{$infix}-#{$size},
          .#{$abbrev}x#{$infix}-#{$size} {
            #{$prop}-left: $length !important;
          }
        }
      }

      // Negative margins (e.g., where `.-mb-1` is negative version of `.mb-1`)
      @each $size, $length in $spacers {
        @if $size != 0 {
          .-m#{$infix}-#{$size} { margin: -$length !important; }
          .-mt#{$infix}-#{$size},
          .-my#{$infix}-#{$size} {
            margin-top: -$length !important;
          }
          .-mr#{$infix}-#{$size},
          .-mx#{$infix}-#{$size} {
            margin-right: -$length !important;
          }
          .-mb#{$infix}-#{$size},
          .-my#{$infix}-#{$size} {
            margin-bottom: -$length !important;
          }
          .-ml#{$infix}-#{$size},
          .-mx#{$infix}-#{$size} {
            margin-left: -$length !important;
          }
        }
      }

      // Some special margin utils
      .m#{$infix}-auto { margin: auto !important; }
      .mt#{$infix}-auto,
      .my#{$infix}-auto {
        margin-top: auto !important;
      }
      .mr#{$infix}-auto,
      .mx#{$infix}-auto {
        margin-right: auto !important;
      }
      .mb#{$infix}-auto,
      .my#{$infix}-auto {
        margin-bottom: auto !important;
      }
      .ml#{$infix}-auto,
      .mx#{$infix}-auto {
        margin-left: auto !important;
      }

    }

  }
}
